{% extends 'common/base.html' %}

{% block title %}注册页面{% endblock %}

{% load static %}

{% block style %}
<link href="{% static 'manage/css/login.css' %}" rel="stylesheet">
<style>
    .demo-login-container{width: 320px; margin: 21px auto 0;}
    .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
{% endblock %}

{% block content %}
  <div class="stars"></div>
  <h1>用户注册</h1> 
  <form action="{% url 'manage:register' %}" method="post" class="layui-form">
      {% csrf_token %}
      <div class="demo-login-container">
          <div class="layui-form-item">
            <div class="layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-tabs"></i>
              </div>
              <input type="text" name="username" value="{{ username }}" lay-verify="required" placeholder="学号/工号" lay-reqtext="请填写学号/工号" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-username"></i>
              </div>
              <input type="text" name="first_name" value="{{ first_name }}" lay-verify="required" placeholder="姓名" lay-reqtext="请填写姓名" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-form"></i>
              </div>
              <input type="text" name="id_card" value="{{ id_card }}" lay-verify="required|identity" placeholder="身份证号" lay-reqtext="请填写身份证号" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-cellphone"></i>
              </div>
              <input type="text" name="tel" value="{{ tel }}" lay-verify="required|phone" placeholder="联系号码" lay-reqtext="请填写联系号码" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-password"></i>
              </div>
              <input type="password" name="password" value="{{ password }}" lay-verify="required" placeholder="密   码" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                  <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="confirm_password" value="{{ confirm_password }}" lay-verify="required|confirmPassword" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">注    册</button>
          </div>
        </div>
        <a class="layui-btn layui-btn-fluid layui-btn-primary layui-border-green layui-btn-sm" href="{% url 'manage:login' %}">已有账号，直接登录</a>

        {% if info %}
          <script>alert("{{ info }}");</script>
        {% endif %}
  </form>

  <script>
    function createStars() {
        const starsContainer = document.querySelector('.stars');
        const starCount = 150;

        for (let i = 0; i < starCount; i++) {
            const star = document.createElement('div');
            star.classList.add('star');
            star.style.left = `${Math.random() * 100}%`;
            star.style.top = `${Math.random() * 100}%`;
            star.style.width = `${Math.random() * 2}px`;
            star.style.height = `${Math.random() * 2}px`;
            star.style.animationDuration = `${Math.random() * 5}s`;
            star.style.animationDelay = `${Math.random() * 5}s`;
            starsContainer.appendChild(star);
        }
    }

    createStars();
  </script>
{% endblock %}